<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="审核状态">
        <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 160px">
          <el-option label="申请通过" value="申请通过" />
          <el-option label="未通过" value="未通过" />
          <el-option label="审核中" value="审核中" />
          <el-option label="用户取消" value="用户取消" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间段">
        <el-select v-model="queryParams.appointTime" placeholder="请选择" clearable style="width: 160px">
          <el-option label="上午" value="0" />
          <el-option label="下午" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="dataList">
      <!-- <el-table-column label="机房ID" align="center" prop="labId" width="80" /> -->
      <el-table-column label="机房名称" prop="labName" align="left" :show-overflow-tooltip="true" />
      <el-table-column label="申请人ID" prop="userId" align="center" :show-overflow-tooltip="true" width="120" />
      <el-table-column label="申请人姓名" align="left" prop="userName" width="120" />
      <el-table-column label="实验内容" align="left" prop="description" width="200" />
      <el-table-column label="机房剩余容量" align="center" prop="residue" width="100" />

      <el-table-column label="发起申请时间" align="center" prop="createTime" width="160" />
      <el-table-column label="申请时间" align="center" prop="appointDate" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.appointDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审核情况" align="left" prop="status" width="100" />
      <el-table-column label="操作" width="200" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="small" v-show="scope.row.status == '审核中'" type="success"
            @click="appointmentAudit(scope.row, '申请通过')">通过</el-button>
          <el-button size="small" v-show="scope.row.status == '审核中'" type="danger"
            @click="appointmentAudit(scope.row, '未通过')">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    /> -->
  </div>
</template>

<script>
import {
  appointmentList,
  appointmentUpdate,
  appointmentAudit,
} from "@/api/studentUserAdmin/index";
export default {
  name: "Role",
  dicts: ["sys_normal_disable"],
  data() {
    return {
      dataList: [], //数据列表
      // 遮罩层
      loading: true,
      // 查询参数
      queryParams: {
        status: "", //审核状态
        appointTime: "", //上午 下午
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //预约审核
    appointmentAudit(row, status) {
      let apad = () => {
        console.log(row);
        appointmentAudit({
          uid: row.uid,
          status: status,
        }).then((res) => {
          this.$message.success(res.msg);
          this.getList();
        });
      };
      if (status == "未通过") {
        this.$confirm("此操作将驳回该条预约申请, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            apad();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else {
        apad();
      }
    },
    /** 查询角色列表 */
    getList() {
      this.loading = true;
      appointmentList(this.queryParams).then((res) => {
        console.log(res.rows);
        this.dataList = res.rows;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal
        .confirm('是否确认取消实验名称为"' + row.labName + '"的预约项？')
        .then(function () {
          appointmentUpdate({
            uid: row.uid,
          }).then((res) => {
            this.$message.success(res.msg);
            this.getList();
          });
        })
        .catch(() => {
          this.$message("已取消");
        });
    },
  },
};
</script>
